<template>
	<view class="container">
		<NavBar title="审批" @back="goBack" />
		<view class="tabs">
			<uv-tabs :list="tabs" :scrollable="false" @click="handleTabClick"></uv-tabs>
		</view>
		<scroll-view refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' scroll-y="true" class="status-list">
			<uv-empty mode="data" text="暂无数据" v-if="approvalList.length==0 && isempty" ></uv-empty>
			<view class="status-item" @click="getApprovalProcess(item)" v-for="(item, index) in approvalList"
				:key="index">
				<view class="status-main">
					<image class="item-image" src="/static/ts_logo.png" mode="aspectFit"></image>
					<view class="item-content">
						<text class="item-title">{{ item.title }}</text>
						<view class="item-info-list">
							<view class="item-info">
								<text class="info-label">审批类型：</text>
								<text class="info-value">{{ flowTypeText(item.flowType) }}</text>
							</view>
							<view class="item-info">
								<text class="info-label">所属项目：</text>
								<text class="info-value">{{ item.projectName }}</text>
							</view>
							<view class="item-info">
								<text class="info-label">所属合同：</text>
								<text class="info-value">{{ item.contractName }}</text>
							</view>
							<view class="item-info">
								<text class="info-label">发起时间：</text>
								<text class="info-value">{{ item.applyTime }}</text>

								<view class="tagStyle">
									<view :class="['status-tag', lastTwo(item.applySpeed)]">
										{{ item.applySpeed }}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import {
		getApprove
	} from '@/utils/app.js'

	export default {
		components: {
			NavBar
		},
		data() {
			return {
				isempty:false,
				refresh:false,
				tabs: [{
					name: '待我审批',
					value: 1
				}, {
					name: '审批记录',
					value: 2
				}, {
					name: '我的申请',
					value: 3
				}],
				activeIndex: 1,
				approvalList: [{
					initiator: '发起人',
					type: '周期',
					project: 'MT-CY六标',
					contract: '施工承包合同',
					createTime: '2024-05-05 15:25:26',
					status: {
						type: 'approved',
						text: '已同意已同意'
					}
				}, ]
			};
		},
		onShow() {
			this.getApproveData()
		},
		async onPullDownRefresh() {
			
		    await this.getApproveData()
		    uni.stopPullDownRefresh()
		},
		methods: {
			// onPullDownRefresh() {
			// 	this.getApproveData()
			// 	uni.stopPullDownRefresh()
			// },
			async refresherrefresh(){
				this.refresh = true
				await this.getApproveData()
				this.refresh = false
			},
			getApproveData() {
				this.isempty = false
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getApprove({
					type: this.activeIndex
				}).then(res => {
					uni.hideLoading();
					if (res && res.code == 200) {
						this.approvalList = res.rows
						if(this.approvalList.length == 0){
							this.isempty = true
						}else{
							this.isempty = false
						}
					}
				})
			},
			handleTabClick(e) {
				this.activeIndex = e.value
				this.getApproveData()
			},
			getApprovalProcess(item) {
				let data = {
					activeIndex: this.activeIndex,
					...item
				}

				uni.navigateTo({
					url: `/pages/approvalProcess/index?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			},
			lastTwo(val) {
				if (val == '流程结束') {
					return 'end'
				}
				switch (String(val).slice(-3)) {
					case '已同意':
						return 'approved'
					case '已驳回':
						return 'rejected'
					case '已发起':
						return 'initiate'
					case '审批中':
						return 'pending'
					default:
						return 'other'
				}

			},
			flowTypeText(val) {
				const map = {
					1: '周期审批',
					2: '变更审批',
					3: '支付报表审批',
					4: '设备结算审批',
					5: '安全支付审批',
					6: '变更变价流程',
					7: '材料结算审批'
				};
				return map[val] || '未知类型';
			},
			goBack() {
				uni.navigateTo({
					url: '/pages/mine/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.tabs {
		width: 100%;
		border-bottom: 1px solid #EEF2F9;
	}

	.tabs-item {
		position: relative;
		height: 96rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;

		.tabr-tiele {
			text-align: center;
		}

		.item-line {
			position: absolute;
			bottom: 0;
			width: 32rpx;
			height: 6rpx;
			background-color: #0052D9;
		}
	}

	.status-list {
		padding: 0 15rpx;
		height: calc(100vh - 276rpx);
		background-color: #f6f7f9;

		.status-item {
			position: relative;
			margin-top: 20rpx;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid #EEF2F9;
			padding: 10rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
		}

		.status-main {
			display: flex;
			align-items: center;
		}

		.item-image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
		}

		.item-content {
			flex: 1;
		}

		.item-title {
			font-size: 15px;
			color: #051E56;
			font-weight: 600;
			margin-bottom: 8px;
			line-height: 20px;
		}

		.item-info-list {
			margin-top: 4px;
		}

		.item-info {
			flex-direction: row;
			margin-bottom: 4px;
		}

		.info-label {
			font-size: 30rpx;
			color: #666666;
			width: 70px;
			line-height: 17px;
		}

		.info-value {
			flex: 1;
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 17px;
		}

		.tagStyle {
			display: flex;
			justify-content: flex-end;
		}

		.status-tag {
			padding: 0 10rpx;
			border-radius: 4px;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.status-tag.approved {
			background-color: #00B42A;
		}

		.status-tag.rejected {
			background-color: #F53F3F;
		}

		.status-tag.pending {
			background-color: #C9CDD4;
		}

		.status-tag.end {
			background-color: #C9CDD4;
		}

		.status-tag.initiate {
			background-color: #165DFF;
		}

		.status-text {
			height: 40rpx;

			text-align: center;
		}
	}
</style>